<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全国外贸企业分布热力图</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            min-height: 100vh;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .header {
            text-align: center;
            margin-bottom: 30px;
        }
        
        .header h1 {
            color: white;
            font-size: 2.5rem;
            font-weight: bold;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }
        
        .header p {
            color: #cbd5e1;
            font-size: 1.2rem;
            margin: 0;
        }
        
        .map-wrapper {
            height: 600px;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
            background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
            position: relative;
        }
        
        .map-header {
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .map-header h3 {
            color: white;
            font-size: 1.25rem;
            font-weight: bold;
            margin: 0;
        }

        .legend {
            display: flex;
            gap: 15px;
            align-items: center;
        }

        .legend-item {
            display: flex;
            align-items: center;
            gap: 5px;
            color: white;
            font-size: 12px;
        }

        .legend-color {
            width: 16px;
            height: 16px;
            border-radius: 2px;
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .map-container {
            position: relative;
            height: calc(100% - 80px);
        }

        .china-map-chart {
            width: 100%;
            height: 100%;
        }

        .loading-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.8);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        .loading-spinner {
            width: 40px;
            height: 40px;
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-top: 3px solid #60a5fa;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-bottom: 15px;
        }

        .loading-text {
            color: white;
            font-size: 14px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .error-message {
            color: #ef4444;
            background: rgba(239, 68, 68, 0.1);
            border: 1px solid #ef4444;
            border-radius: 8px;
            padding: 15px;
            margin: 20px;
            text-align: center;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-top: 30px;
        }
        
        .stat-card {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 12px;
            padding: 20px;
            text-align: center;
            backdrop-filter: blur(10px);
        }
        
        .stat-card h3 {
            color: #60a5fa;
            font-size: 1.5rem;
            margin: 0 0 10px 0;
        }
        
        .stat-card p {
            color: white;
            font-size: 0.9rem;
            margin: 0;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <div class="header">
                <h1>全国外贸企业分布热力图</h1>
                <p>基于2024年外贸企业区域分布数据</p>
            </div>
            
            <div class="map-wrapper">
                <div class="map-header">
                    <h3>全国外贸企业分布热力图</h3>
                                         <div class="legend">
                        <div class="legend-item">
                            <div class="legend-color" style="background: #2e7d32"></div>
                            <span>0-15万家</span>
                        </div>
                        <div class="legend-item">
                            <div class="legend-color" style="background: #66bb6a"></div>
                            <span>15-30万家</span>
                        </div>
                        <div class="legend-item">
                            <div class="legend-color" style="background: #ffeb3b"></div>
                            <span>30-80万家</span>
                        </div>
                        <div class="legend-item">
                            <div class="legend-color" style="background: #e53935"></div>
                            <span>80-150万家</span>
                        </div>
                        <div class="legend-item">
                            <div class="legend-color" style="background: #b71c1c"></div>
                            <span>150万家以上</span>
                        </div>
                    </div>
                </div>
                
                <div class="map-container">
                    <div ref="chinaMap" class="china-map-chart"></div>
                    
                    <div v-if="loading" class="loading-overlay">
                        <div class="loading-spinner"></div>
                        <p class="loading-text">正在加载地图数据...</p>
                    </div>
                    
                    <div v-if="error" class="error-message">
                        {{ error }}
                    </div>
                </div>
            </div>
            
            <div class="stats-grid">
                <div class="stat-card">
                    <h3>1,686万家</h3>
                    <p>全国外贸企业总数</p>
                </div>
                <div class="stat-card">
                    <h3>245.5万家</h3>
                    <p>广东省（最多）</p>
                </div>
                <div class="stat-card">
                    <h3>4.1万家</h3>
                    <p>青海省（最少）</p>
                </div>
                <div class="stat-card">
                    <h3>8个</h3>
                    <p>区域类别</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        const { createApp } = Vue

        createApp({
            data() {
                return {
                    chart: null,
                    loading: true,
                    error: null,
                    // 基于CSV数据的企业分布数据
                    provinceData: {
                        '广东省': { count: 245.5, category: '核心集聚区' },
                        '浙江省': { count: 132.8, category: '核心集聚区' },
                        '江苏省': { count: 128.6, category: '核心集聚区' },
                        '上海市': { count: 98.7, category: '核心集聚区' },
                        '福建省': { count: 86.4, category: '海峡经济区' },
                        '山东省': { count: 78.9, category: '沿海发达区' },
                        '北京市': { count: 65.2, category: '环渤海区' },
                        '香港特别行政区': { count: 58.3, category: '国际枢纽' },
                        '台湾省': { count: 52.1, category: '海峡经济区' },
                        '四川省': { count: 42.3, category: '西部增长极' },
                        '湖北省': { count: 38.7, category: '中部枢纽' },
                        '河南省': { count: 36.5, category: '中部枢纽' },
                        '湖南省': { count: 34.2, category: '中部枢纽' },
                        '安徽省': { count: 32.8, category: '中部枢纽' },
                        '辽宁省': { count: 29.4, category: '环渤海区' },
                        '天津市': { count: 28.1, category: '环渤海区' },
                        '河北省': { count: 26.7, category: '环渤海区' },
                        '江西省': { count: 24.3, category: '中部枢纽' },
                        '广西壮族自治区': { count: 22.5, category: '西部增长极' },
                        '重庆市': { count: 20.8, category: '西部增长极' },
                        '陕西省': { count: 19.2, category: '西部增长极' },
                        '澳门特别行政区': { count: 18.6, category: '国际枢纽' },
                        '云南省': { count: 17.6, category: '西部增长极' },
                        '黑龙江省': { count: 15.3, category: '东北区' },
                        '吉林省': { count: 14.1, category: '东北区' },
                        '山西省': { count: 13.4, category: '中部枢纽' },
                        '贵州省': { count: 11.8, category: '西部增长极' },
                        '甘肃省': { count: 10.2, category: '西部增长极' },
                        '海南省': { count: 9.7, category: '沿海发达区' },
                        '内蒙古自治区': { count: 8.9, category: '北部边疆区' },
                        '新疆维吾尔自治区': { count: 7.5, category: '西部边疆区' },
                        '西藏自治区': { count: 5.2, category: '西部边疆区' },
                        '宁夏回族自治区': { count: 4.8, category: '西部增长极' },
                        '青海省': { count: 4.1, category: '西部增长极' }
                    }
                }
            },
            mounted() {
                this.initMap()
            },
            beforeUnmount() {
                if (this.chart) {
                    this.chart.dispose()
                }
            },
            methods: {
                async initMap() {
                    try {
                        console.log('开始初始化地图...')
                        
                        // 检查ECharts是否加载
                        if (!window.echarts) {
                            throw new Error('ECharts未加载')
                        }
                        
                        // 加载中国地图数据
                        const chinaGeoData = await this.loadChinaMapData()
                        
                        // 注册地图
                        echarts.registerMap('china', chinaGeoData)
                        
                        // 初始化图表
                        this.chart = echarts.init(this.$refs.chinaMap, 'dark')
                        
                        // 配置图表选项
                        const option = this.getMapOption()
                        this.chart.setOption(option)
                        
                        // 绑定事件
                        this.bindEvents()
                        
                        this.loading = false
                        console.log('地图初始化完成')
                    } catch (error) {
                        console.error('地图初始化失败:', error)
                        this.error = '地图初始化失败: ' + error.message
                        this.loading = false
                    }
                },
                
                async loadChinaMapData() {
                    try {
                        console.log('正在加载中国地图数据...')
                        const response = await fetch('https://geo.datav.aliyun.com/areas/bound/100000_full.json')
                        if (!response.ok) {
                            throw new Error('网络请求失败: ' + response.status)
                        }
                        const data = await response.json()
                        console.log('地图数据加载成功，包含省份数量:', data.features.length)
                        return data
                    } catch (error) {
                        console.error('地图数据加载失败:', error)
                        throw error
                    }
                },
                
                getMapOption() {
                    // 准备数据
                    const mapData = Object.keys(this.provinceData).map(name => ({
                        name,
                        value: this.provinceData[name].count
                    }))
                    
                    return {
                        backgroundColor: 'transparent',
                        title: {
                            text: '全国外贸企业分布热力图',
                            left: 'center',
                            top: 10,
                            textStyle: {
                                color: '#fff',
                                fontSize: 18
                            }
                        },
                        tooltip: {
                            trigger: 'item',
                            backgroundColor: 'rgba(0, 0, 0, 0.8)',
                            borderColor: '#60a5fa',
                            textStyle: {
                                color: '#fff'
                            },
                            formatter: (params) => {
                                const data = this.provinceData[params.name]
                                if (!data) return params.name + '<br/>暂无数据'
                                return '<div style="font-size: 14px; line-height: 1.5;">' +
                                    '<strong>' + params.name + '</strong><br/>' +
                                    '企业数量: ' + data.count + ' 万家<br/>' +
                                    '区域类别: ' + data.category + '<br/>' +
                                    '发展水平: ' + this.getDevelopmentLevel(data.count) +
                                    '</div>'
                            }
                        },
                        series: [
                            {
                                name: '外贸企业数量',
                                type: 'map',
                                map: 'china',
                                roam: true,
                                zoom: 1.2,
                                center: [105, 36],
                                data: mapData,
                                label: {
                                    show: true,
                                    color: '#000',
                                    fontSize: 11,
                                    fontWeight: 'bold',
                                    textShadowColor: '#fff',
                                    textShadowBlur: 2,
                                    textShadowOffsetX: 1,
                                    textShadowOffsetY: 1
                                },
                                itemStyle: {
                                    borderColor: 'rgba(255, 255, 255, 0.8)',
                                    borderWidth: 1.5
                                },
                                emphasis: {
                                    itemStyle: {
                                        borderColor: '#333',
                                        borderWidth: 2,
                                        shadowBlur: 10,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    },
                                    label: {
                                        show: true,
                                        color: '#000',
                                        fontSize: 13,
                                        fontWeight: 'bold',
                                        textShadowColor: '#fff',
                                        textShadowBlur: 3
                                    }
                                }
                            }
                        ],
                        visualMap: {
                            min: 0,
                            max: 250,
                            left: 'left',
                            top: 'bottom',
                            text: ['高', '低'],
                            realtime: false,
                            calculable: false,
                            type: 'piecewise',
                            pieces: [
                                { min: 150, color: '#b71c1c' },      // 深红色: 150万家以上
                                { min: 80, max: 150, color: '#e53935' },  // 红色: 80-150万家
                                { min: 30, max: 80, color: '#ffeb3b' },   // 黄色: 30-80万家
                                { min: 15, max: 30, color: '#66bb6a' },   // 浅绿色: 15-30万家
                                { min: 0, max: 15, color: '#2e7d32' }     // 深绿色: 0-15万家
                            ],
                            textStyle: {
                                color: '#fff'
                            },
                            backgroundColor: 'rgba(0, 0, 0, 0.3)',
                            borderColor: '#404040',
                            borderWidth: 1,
                            padding: [10, 10]
                        }
                    }
                },
                
                getDevelopmentLevel(count) {
                    if (!count) return '数据缺失'
                    if (count >= 200) return '极高水平'
                    if (count >= 100) return '高水平'
                    if (count >= 50) return '中高水平'
                    if (count >= 20) return '中等水平'
                    return '发展中'
                },
                
                bindEvents() {
                    // 窗口大小变化事件
                    window.addEventListener('resize', () => {
                        if (this.chart) {
                            this.chart.resize()
                        }
                    })
                }
            }
        }).mount('#app')
    </script>
</body>
</html> 